<template>
  <van-nav-bar
      v-isstudent
      title="请假"
      right-text="添加"
      right-arrow
      fixed
      @click-right="$router.push('/leave/add')"
    />
    <van-nav-bar
      v-isteacher
      title="请假"
      fixed
    />
  <div class="behavior-container">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="card" v-for="item in list" :key="item" :title="item.name">
        <div>
          <label>请假类型: </label>{{ item.type }}
        </div>
        <div>
          <label>请假时间: </label>{{ item.startDate }} ~ {{ item.endDate }}
        </div>
        <div>
          <label>请假内容: </label>{{ item.content }}
        </div>
        <div>
          <label>请假状态: </label>{{ item.status }}
        </div>
        <div>
          <label>提交时间: </label>{{ item.createDate }}
        </div>
        <footer v-isteacher>
          <van-button size="small" hairline type="success" @click="pass(item)" v-if="item.status != '已通过' ">通过</van-button>
        </footer>
      </div>
    </van-list>
  </div>
</template>
<style scoped>
.behavior-container{
  margin-top: 50px;
}
.card {
  border: 1px solid #ccc;
  padding: 1em;
  margin-bottom: 1em;
}
</style>
<script setup>
import { ref } from 'vue';
import { getList } from '@/api/leave.js'

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const pass = (item) => {
  item.status = '已通过';
}



const onLoad = async () => {
  const res = await getList()
    console.log(res)
    list.value = [...list.value, ...res]

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 50) {
      finished.value = true;
    }

  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     list.value.push({
  //       id: list.value.length + 1,
  //       name: '小花',
  //       type: '事假',
  //       content: '请假内容',
  //       startDate: '2021-06-01',
  //       endDate: '2021-06-02',
  //       status: '未审核',
  //       createDate: '2021-06-01 12:00:00'
  //     });
  //   }

  //   // 加载状态结束
  //   loading.value = false;

  //   // 数据全部加载完成
  //   if (list.value.length >= 50) {
  //     finished.value = true;
  //   }
  // }, 1000);
}
</script>
